<template>
	<view class="home clearfix">
		<cu-custom bgColor="bg-transparent justify-end">
			<block slot="content"></block>
			<block slot="right">
				<view class="wp100 px15 flex align-center justify-between" style="color: #fff;">
					<view @click="pushPage('/pages/fabu/postContent')" style="color: #000000;">发布</view>
					<view class="flex align-center search-box px15" 
						  @click="pushPage('/pages/goods/search')"
						   style="border: 1px solid #ccc;">
						<image src="/static/home/seo.png" class="block15"></image>
						<text class="f12 text-info ml10">搜索服务</text>
					</view>
					<view @click="pushPage('/pages/fabu/fenlei')" style="color: #000000;">分类</view>
				</view>
			</block>
		</cu-custom>
		
		<view class="flex align-center bg-white mx15 flex-wrap" STYLE="padding-bottom: 10px;">
			<view class="wp25 flex flex-direction align-center" style="padding-top: 30rpx;" v-if="index<8" v-for="(item, index) in nav" :key="index" @click="pushNav(item, index)">
				<image class="block55" :src="item.img"></image>
				<text class="f12" style="margin-top: 10rpx;">{{ item.name }}</text>
			</view>
		</view>
		
		<view class="gundong flex align-center bg-white">
			<view class="flex align-center justify-between" :style="[{ width: list.length *150 +'rpx' }]">
				<view class="flex flex-direction align-center gundongwidth" v-for="(item,index) in list" :key="index" @click="choice(item,index)">
					<text class="text-info" :class="{choice:index==storeindex}">{{item.name}}</text>
					<view class="class-choice mt5 bg-red" v-if="index==storeindex"></view>
					<view class="class-choice mt5 bg-white" v-else></view>
				</view>
			</view>
		</view>
		
		<scroll-view class="scroll-view home home-scrollView" 
		             scroll-y 
					 @scrolltolower="OnReachBottom"
					 style="height: calc(100vh - 90rpx - 356rpx - 120rpx - 96rpx - 10rpx);background: #f7f7f7;padding: 0 24rpx;margin-top: 24rpx;">
		
			<view class="banner"  style="height: 140rpx;">
				<image src="/static/fabu/banner.png" mode=""></image>
			</view>	
			
			<view class="category-box">
				<view class="category-box-item">价格</view>
				<view class="category-box-item">距离</view>
				<view class="category-box-item">点赞</view>
				<view class="category-box-item">等级</view>
			</view>
			
			<view class="datalist">
				<view class="datalist-item">
					<view class="item-top">
						<view class="item-top-img">
							<image src="/static/fabu/kaisuo.jpg" class="image"></image>
						</view>
						<view class="item-top-info">
							<view class="info-top">
								<view class="text">开锁</view>
								<view class="">距：10m</view>
							</view>
							<view class="info-bottom">
								<text class="xing">☆ ☆ ☆ ☆ ☆</text>
								<image src="/static/fabu/daohang.png" class="dingweiImg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="fenxiang item-bottom-content">
							<image src="/static/fabu/fenxiang.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="guanzhu item-bottom-content">
							<image src="/static/fabu/guanzhu.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="dianzan item-bottom-content">
							<image src="/static/fabu/dianzan.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="pinglun item-bottom-content">
							<image src="/static/fabu/pinglun.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="datalist">
				<view class="datalist-item">
					<view class="item-top">
						<view class="item-top-img">
							<image src="/static/fabu/kaisuo.jpg" class="image"></image>
						</view>
						<view class="item-top-info">
							<view class="info-top">
								<view class="text">开锁</view>
								<view class="">距：10m</view>
							</view>
							<view class="info-bottom">
								<text class="xing">☆ ☆ ☆ ☆ ☆</text>
								<image src="/static/fabu/daohang.png" class="dingweiImg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="fenxiang item-bottom-content">
							<image src="/static/fabu/fenxiang.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="guanzhu item-bottom-content">
							<image src="/static/fabu/guanzhu.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="dianzan item-bottom-content">
							<image src="/static/fabu/dianzan.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="pinglun item-bottom-content">
							<image src="/static/fabu/pinglun.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="datalist">
				<view class="datalist-item">
					<view class="item-top">
						<view class="item-top-img">
							<image src="/static/fabu/kaisuo.jpg" class="image"></image>
						</view>
						<view class="item-top-info">
							<view class="info-top">
								<view class="text">开锁</view>
								<view class="">距：10m</view>
							</view>
							<view class="info-bottom">
								<text class="xing">☆ ☆ ☆ ☆ ☆</text>
								<image src="/static/fabu/daohang.png" class="dingweiImg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="fenxiang item-bottom-content">
							<image src="/static/fabu/fenxiang.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="guanzhu item-bottom-content">
							<image src="/static/fabu/guanzhu.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="dianzan item-bottom-content">
							<image src="/static/fabu/dianzan.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
						<view class="pinglun item-bottom-content">
							<image src="/static/fabu/pinglun.png" class="item-bottom-img" mode=""></image>
							<text>99</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
//import wPicker from "@/components/w-picker/w-picker.vue";
export default {
	data() {
		return {
			nav: [],
			bannerCurrent: 0,
			noticeCurrent: 0,
			notice: [],
			swiperList: [],
			dotStyle: false,
			direction: '',
			cardCur: 0,
			onepic:'',
			tuijianList: [],
			hotList: [],
			homenav:[
				{
					name:'',
					titleDesc:'',
					typeName:'',
					img:'',
				},
				{
					name:'',
					titleDesc:'',
					typeName:'',
					img:'',
				},
				{
					name:'',
					titleDesc:'',
					typeName:'',
					img:'',
				},
			],
			
			storeindex:0,
			list:[],
			store:[],
		};
	},
	onShow() {
		// this.$t('tabbar').forEach((text, index) => {
		// 	uni.setTabBarItem({ index: index, text: text })
		// })
		this.getData()
		
		this.clearStore()
	},
	computed: {
		...mapState(['userInfo']),
		...mapState(['storetype'])
	},
	methods: {
		...mapActions(['setStoretype', 'getUser']),
		OnReachBottom(){
			
		},
		async getData() {
			let {
				data: { lunbotu, shengtaiImgs, oneMoneyImg, gonggaos,newgoods,bkgoods,vipSt }
			} = await this.$http.post('home.index', {}, {tipConfig: { storeLoading: true, isSuccessTip: false }});
			this.swiperList = lunbotu;
			this.nav = shengtaiImgs;
			this.onepic=oneMoneyImg
			this.notice = gonggaos;
			this.tuijianList=newgoods
			this.hotList=bkgoods
			this.homenav=vipSt
			// this.shops = shop;
			
			let {data} = await this.$http.post('store.index', {}, {tipConfig: { storeLoading: true } })
			this.list=data
			this.getStore()
		},
		async getStore() {
			if (this.finish) return
			let {
				data:{stores}
			} = await this.$http.post('store.storename', { page: this.page,typeId:this.list[this.storeindex].id },{tipConfig: { storeLoading: true, isSuccessTip: false }})
			this.finish = stores.length < 20
			!this.finish && (this.page += 1)
			this.store = [...this.store, ...stores]
		},
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		pushgg(item) {
			this.pushPage('/pages/user/article/article?id=' + item.articleId);
		},
		saoma() {
			uni.scanCode({
				success: function(res) {
					uni.navigateTo({
						url: '/pages/cart/tableorder?' + res.result
					});
				}
			});
		},
		pushNav(item, index) {
			this.pushPage('/pages/home/more?id='+item.id+'&title='+item.name+'&type='+'2')
			// this.setStoretype(index);
			// uni.switchTab({
			// 	url: '/pages/class/index'
			// });
		},
		clearStore(){
			this.store=[]
			this.finish=false
			this.page=1
		},
		choice(item,index){
			this.storeindex=index
			this.clearStore()
			this.getStore2()
			// this.setStoretype(this.classactive)
			// this.getData()
		}
	}
};
</script>

<style lang="less">
.tuijian-biaoqian{
	width: 14rpx;
	height: 27rpx;
}
.block10 {
	width: 20rpx;
	height: 20rpx;
}
.guanggao{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 225rpx;
	margin-top: 30rpx;
}
.home-bg {
	width: 100%;
	height: 370rpx;
	position: fixed;
	top: 0;
}
.search-box {
	width: 480rpx;
	height: 66rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
}
.vipbox{
	width: 70rpx;
	height: 34rpx;
	color: #FFFFFF;
	background-color: #d73329;
}
.wp20 {
	width: 20%;
}
.block55 {
	width: 110rpx;
	height: 110rpx;
}
.swiper-img {
	width: 670rpx !important;
	height: 286rpx !important;
}
.card-swiper uni-swiper-item .swiper-item {
	width: 670rpx !important;
	height: 286rpx !important;
}
.card-swiper uni-swiper-item {
	width: 330px !important;
	left: 20px !important;
	padding: 30rpx 0px 70rpx !important;
}
.card-swiper {
	height: 360rpx !important;
}
.tuijian {
	&-left {
		width: 310rpx;
		height: 420rpx;
		&-pic{
			width: 282rpx;
			height: 230rpx;
		}
	}
	&-rightmid {
		width: 360rpx;
		height: 420rpx;
	}
	&-right {
		width: 360rpx;
		height: 200rpx;
	}
}
.notice-pic {
	width: 60rpx;
	height: 40rpx;
}
.notice-box {
	width: calc(100% - 60rpx);
}
.tuijian {
	width: 6rpx;
	height: 36rpx;
}
.tuijian-box{
	width: 320rpx;
}
.tuijian-pic {
	width: 320rpx;
	height: 320rpx;
}
.goods-box {
	width: 336rpx;
}
.goods-pic {
	width: 336rpx;
	height: 336rpx;
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
}
.wp25 {
	width: 25%;
}
.list-line {
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 1rpx;
	background-color: #e8e3e3;
}
.mx15 {
	margin-left: 30rpx;
	width: calc(100% - 60rpx);
}

.category-box {
	display: flex;
	align-items: center;
	text-align: center;
	height: 60rpx;
	background-color: #fff;
	
	.category-box-item {
		flex: 1;
		position: relative;
		
		&::after {
			content: "";
			position: absolute;
			top: 12rpx;
			left: 120rpx;
			width: 0;
			height: 0;
			border-width: 8rpx;
			border-style: solid;
			border-color: #000 transparent transparent transparent;
		}
	}
}

.datalist {
	background: #f7f7f7;
	margin-top: 24rpx;
	.datalist-item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 100%;
		background: #FFFFFF;
		border-radius: 10rpx;
		
		.item-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 160rpx;
			padding: 20rpx 20rpx 0;
			
			.item-top-img {
				width: 140rpx;
				height: 140rpx;
			}
			.item-top-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 140rpx;
				
				.info-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 40rpx;
					.text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
				.info-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 40rpx;
					margin-top: 8rpx;
					
					.xing {
						font-size: 40rpx;
					}
					
					.dingweiImg {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.item-bottom {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 0 20rpx 20rpx;
			
			.item-bottom-content {
				display: flex;
				// flex-direction: column;
				justify-content: center;
				align-items: center;
				
				.item-bottom-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}


.gundong{
	overflow-x: scroll;
	padding: 12px 0 0 0;
	margin: 0 15px;
	border-top: 1px solid #E8E8E8;
}
.guangguang{
	width: 130rpx;
	height: 50rpx;
	border-radius: 60rpx;
	border: 1rpx solid #D73329;
	color: #D73329;
}
.gundongwidth{
	width: 150rpx;
}
.choice{
	color: #ea2e0d;
}
.class-choice{
	width: 57rpx;
	height: 9rpx;
}

// .home-scrollView {
// 	height: calc(100vh - 45px - 150px - 45px - 60px);
// }
</style>
